RootZanli & NinjaCr3

: / home / o5t6x7pgljbm / public_html / admin / resources / views / Admin / College /
Filename : create.blade.php
back
@extends('Admin.layout.main')
@section('content')
@section('pagestylesheet')
    <link rel="stylesheet" href="{{ asset('app-assets/css/ckeditor5.css') }}" type="text/css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
    <link rel="stylesheet" href="{{ asset('app-assets/vendors/select2/select2.min.css') }}" type="text/css">
    <link rel="stylesheet" href="{{ asset('app-assets/vendors/select2/select2-materialize.css') }}" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />
    <style>
        .row .col.m6 {
            position: relative;
        }

        p.error {
            color: red;
            line-height: 18px;
        }
    </style>
@stop
<div id="main">
    <div class="row">
        <div class="col s12">
            <div class="container">
                <div class="section">
                    <div class="row">
                        <div class="col s12 m12 l12">
                            <div id="Form-advance" class="card card card-default scrollspy">
                                <div class="card-content">
                                    <h4 class="card-title">Add College</h4>

                                    @if ($message = Session::get('success'))
                                        <div class="alert alert-success alert-dismissable alert-style-1 text-success">
                                            <p><i class="zmdi zmdi-check"></i> {{ $message }}</p>
                                        </div>
                                    @elseif ($message = Session::get('error'))
                                        <div class="alert alert-danger alert-dismissable alert-style-1 text-danger">
                                            <p><i class="zmdi zmdi-close"></i> {{ $message }}</p>
                                        </div>
                                    @endif
                                    @if ($errors->any())
                                        <div>
                                            <ul>
                                                @foreach ($errors->all() as $error)
                                                    <li
                                                        class="alert alert-danger alert-dismissable alert-style-1 text-danger">
                                                        <i class="zmdi zmdi-block"></i> {{ $error }}
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif

                                    <form action="{{ route('colleges.store') }}" method="POST" class=""
                                        id="create-college" enctype="multipart/form-data">
                                        @csrf

                                        <div class="row">
                                            <div class="input-field col m6 s12">
                                                <input id="college_name" name="college_name" type="text">
                                                <label for="college_name">College Name</label>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="input-field col m6 s12">
                                                <input id="tuition_fee" name="tuition_fee" type="text">
                                                <label for="tuition_fee">Tuition Fee</label>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="input-field col m6 s12">
                                                <input id="application_deadline" name="application_deadline" class="application_deadline" type="text" autocomplete="off">
                                                <label for="application_deadline">Application Deadline</label>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="input-field col m6 s12">
                                                <label for="about_college">About College</label><br>
                                                <textarea id="about_college" class="ckeditor" name="about_college" type="text" placeholder="About College"></textarea>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="input-field col m6 s12">
                                                <input id="scholarship_points" name="scholarship_points" type="text">
                                                <label for="scholarship_points">Scholarship Points</label>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="input-field col m6 s12">
                                                <input id="sat_min_range" name="sat_min_range" type="text">
                                                <label for="sat_min_range">Sat Min Range</label>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="input-field col m6 s12">
                                                <input id="sat_max_range" name="sat_max_range" type="text">
                                                <label for="sat_max_range">Sat Max Range</label>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="input-field col m6 s12">
                                                <input id="act_min_range" name="act_min_range" type="text">
                                                <label for="act_min_range">Act Min Range</label>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="input-field col m6 s12">
                                                <input id="act_max_range" name="act_max_range" type="text">
                                                <label for="act_max_range">Act Max Range</label>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="input-field col m6 s12">
                                                <input id="high_school_gpa" name="high_school_gpa" type="text">
                                                <label for="high_school_gpa">High School GPA</label>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="input-field col m6 s12">
                                                <input id="median_salary" name="median_salary" type="text">
                                                <label for="median_salary">Median Salary</label>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="input-field col m6 s12">
                                                <input id="avarage_debt" name="avarage_debt" type="text">
                                                <label for="avarage_debt">Avarage Debt</label>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="input-field col m6 s12">
                                                <input id="graduation_rate" name="graduation_rate" type="text">
                                                <label for="graduation_rate">Graduation Rate</label>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="input-field col m6 s12">
                                                <input id="acceptance_rate" name="acceptance_rate" type="text">
                                                <label for="acceptance_rate">Acceptance Rate</label>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="input-field col m6 s12">
                                                <input id="sp_per_week" name="sp_per_week" type="text">
                                                <label for="sp_per_week">SP Per Week</label>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="input-field col m6 s12">
                                                <select name="country_id" id="country_id">
                                                    <option value="" selected disabled>- Countries -</option>
                                                    @foreach ($countries as $country)
                                                        <option value="{{ $country->country_id }}">{{ $country->country_name }}</option>
                                                    @endforeach
                                                </select>
                                                <label for="country_id">Countries</label>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="input-field col m6 s12">
                                                <select name="ivy_league_badge" id="ivy_league_badge">
                                                    <option value="" selected disabled>- IVY League Badge -</option>
                                                        <option value="IVY_LEAGUE">IVY_LEAGUE</option>
                                                        <option value="STATE_UNI">STATE_UNI</option>
                                                        <option value="COMMUNITY">COMMUNITY</option>
                                                        <option value="PRIVATE">PRIVATE</option>
                                                        <option value="PUBLIC UNIVERSITY">PUBLIC UNIVERSITY</option>
                                                </select>
                                                <label for="ivy_league_badge">IVY League Badge</label>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="input-field col m6 s12" id="hide_box">
                                                <select class="js-example-basic-single select2 browser-default" multiple="" name="course_id[]">
                                                    @foreach($courses as $course)
                                                        <option value="{{ $course->course_id }}">{{ $course->course_name }}</option>
                                                    @endforeach
                                                </select>
                                                <label for="Course">Select Course</label>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="input-field col m6 s12">
                                                <label for="Description">Description</label><br>
                                                <textarea class="ckeditor  form-control" id="body"
                                                    placeholder="Enter the Description"
                                                    name="description"></textarea>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="input-field col m3 s12">
                                                <h6><b>Goals</b></h6><br>
                                                @foreach ($goals as $goal)
                                                    <input id="goals" type="text" value="{{ $goal->goal_name }}" readonly>
                                                    <input id="goals" type="hidden" name="goal_id[]" value="{{ $goal->goal_id }}">
                                                @endforeach
                                            </div>

                                            <div class="input-field col m3 s12">
                                                <h6><b>weightage</b></h6><br>
                                                @foreach ($goals as $goal)
                                                    <input id="weightage" name="weightage[]" type="number" min="1" max="100" value="{{$goal->default_weightage}}">
                                                @endforeach
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="input-field col m6 s12">
                                                <div class="row" class="tdfirstclass">
                                                    <h6><b>College Image</b></h6>
                                                </div><br>

                                                <div class="col-md-8">
                                                    <div class="row">
                                                        <div id="file"></div>
                                                    </div>
                                                    <div id="image-error" style="color: red;"></div>
                                                </div>
                                            </div>
                                        </div>

                                        @for ($i = 1; $i <= 3; $i++)
                                            <div class="main-prize">
                                                <div class="row">
                                                    <div class="modal-content col m6 s12">
                                                        <hr>
                                                        <div class="add-prize-heading">
                                                            <h6 style="font-weight: bold">Add Popular Major {{ $i }}
                                                                <a href="javascript:void(0);"
                                                                    class="remove-prize right">&times</a>
                                                            </h6>
                                                        </div>
                                                        <div class="" id="product-one" style="">
                                                            <div class="row">
                                                                <div class="input-field col m6 s12">
                                                                    <input id="popular_major_name_{{ $i }}" name="popular_major_name[{{ $i }}]" type="text" required>
                                                                    <label for="popular_major_name_{{ $i }}">Popular Major Name<span class="text-danger">*</span></label>
                                                                </div>

                                                                <div class="input-field col m6 s12">
                                                                    <input id="required_percentage_{{ $i }}" name="required_percentage[{{ $i }}]" type="number" min="1" max="100" required>
                                                                    <label for="required_percentage_{{ $i }}">Required Percentage<span class="text-danger">*</span></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endfor

                                        <table class="table table-responsive table-bordered">
                                            <tr>
                                                <th colspan="5">
                                                    <button id="btnAddmore" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-Description="Add more controls"><i class="glyphicon glyphicon-plus-sign" style="width: 101px;"></i>&nbsp; Add More Popular Major &nbsp;</button>
                                                </th>
                                            </tr>
                                        </table>

                                        <div class="row">
                                            <div class="input-field col s12">
                                                <button class="btn cyan waves-effect waves-light right" type="submit"
                                                    name="action">Submit
                                                    <i class="material-icons right">save</i>
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@section('pagescript')
    <script src="{{ asset('app-assets/js/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('app-assets/js/ckeditor5.js') }}"></script>
    {{-- <script src="{{ asset('//cdn.gaic.com/cdn/ui-bootstrap/0.58.0/js/lib/ckeditor/ckeditor.js')}}"></script> --}}
    <script src="{{ asset('app-assets/js/spartan-multi-image-picker.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/select2/select2.full.min.js')}}"></script>
    <script src="{{ asset('app-assets/js/scripts/form-select2.js')}}"></script>

    <script type="text/javascript">
        $( document ).ready(function() {
            $(".select2").select2({
                dropdownAutoWidth: true,
                width: '100%'
            });
        });
    </script>

    <!--Add More Button-->
    <script type="text/javascript">
        var i = 3;
        $(document).on("click", "#btnAddmore", function(e) {
            if (i < 10) {
                e.preventDefault();
                i++;

                $('.main-prize:last').append(
                    '<div class="row">'+
                    '<div class="modal-content col m6 s12">' +
                        '<hr>' +
                        '<div class="add-prize-heading">' +
                            '<h6 style="font-weight: bold">Add Popular Major ' + i + '' +
                            '<a href="javascript:void(0);" class="remove-prize right">&times</a></h6>' +
                        '</div>' +

                        '<div class="" id="product-one" style ="">' +
                            '<div class="row">' +
                                '<div class="input-field col m6 s12">' +
                                    '<input id="popular_major_name" name="popular_major_name[]" type="text">' +
                                    '<label for="popular_major_name">Popular Major Name<span class="text-danger">*</span></label>' +
                                '</div>'

                                +
                                '<div class="input-field col m6 s12">' +
                                    '<input id="required_percentage" name="required_percentage[]" type="number" min="1" max="100">' +
                                    '<label for="required_percentage">Required Percentage  <span class="text-danger">*</span></label>' +
                                '</div>' +
                            '</div>'+
                        '</div>' +
                    '</div>'+'</div>'
                );

                $("#btnAddmore").show();

                if (i == 10) {
                    $("#btnAddmore").hide();
                }

            }
        });
        //add more button close

        //remove section button
        $(document).on('click', '.remove-prize', function(e) {
            e.preventDefault();
            $(this).closest('.main-prize .modal-content').remove();
        });
        //remove section button close
    </script>
   <!--Add More Button close-->

    <script>
        $(function() {
                $("#file").spartanMultiImagePicker({
                    fieldName: 'collegeImage[]',
                    maxCount: 5,
                    rowHeight: '200px',
                    groupClassName: 'col m6 s12',
                    allowedExt: 'png|jpg|jpeg',
                    maxFileSize: 5000000,
                    placeholderImage: {
                        image: "{{ asset('college_images/pluse1.png') }}",
                        width: '100%'
                    },
                    dropFileLabel: "Drop Here",
                    onAddRow: function(index) {
                        console.log(index);
                        console.log('add new row');
                    },
                    onRenderedPreview: function(index) {
                        console.log(index);
                        console.log('preview rendered');
                    },
                    onRemoveRow: function(index) {
                        console.log(index);
                    },
                    onExtensionErr: function(index, file) {
                        // console.log(index, file,  'extension err');
                        alert('Please only select png, jpg or jpeg type file.')
                    },
                    onSizeErr: function(index, file) {
                        console.log(index, file);
                        alert('File size too big. Max file size is 5MB.');
                    }
                });
            });
            $('form').submit(function() {
                var files = $('#file input[type="file"]').get(0).files;
                if (files.length === 0) {
                    $('#image-error').text('Please select at least one image.'); // Display error message
                    return false; // Prevent form submission
                } else {
                    $('#image-error').text(''); // Clear error message if images are selected
                }
                return true; // Allow form submission
            });

    </script>

    <script type="text/javascript">
        CKEDITOR.replaceAll('.ckeditor');

        $(function() {
            $('.application_deadline').datepicker({
                format: 'dd mmm yyyy'
            });
        });

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#imgs').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]); // convert to base64 string
            }
        }

        $("#imgInp").change(function() {
            readURL(this);
        });
    </script>{{-- image show --}}

    <script type="text/javascript">

        function string_to_slug(str) {
            str = str.replace(/^\s+|\s+$/g, ""); // trim
            str = str.toLowerCase();

            // remove accents, swap ñ for n, etc
            var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
            var to = "aaaaeeeeiiiioooouuuunc------";
            for (var i = 0, l = from.length; i < l; i++) {
                str = str.replace(new RegExp(from.charAt(i), "g"), to.charAt(i));
            }

            str = str
                .replace(/[^a-z0-9 -]/g, "") // remove invalid chars
                .replace(/\s+/g, "-") // collapse whitespace and replace by -
                .replace(/-+/g, "-"); // collapse dashes

            return str;
        }
        $.validator.addMethod("requiredIfOtherPresent", function (value, element, params) {
            const otherField = $(params.otherField).val();
            // If the other field has a value, this field is required
            return otherField === "" || value.trim() !== "";
        }, "This field is required if the other field is filled.");

        $('#create-college').validate({
            rules: {
                college_name: {
                    required: true,
                },
                // collegeImage: {
                //     required: true,
                // },
                tuition_fee: {
                    required: true,
                    number:true,
                },
                application_deadline: {
                    required: true
                },
                scholarship_points: {
                    required: true,
                    number:true,
                },
                sat_min_range: {
                    requiredIfOtherPresent: { otherField: "#sat_max_range" },
                    number:true,
                },
                sat_max_range: {
                    requiredIfOtherPresent: { otherField: "#sat_min_range" },
                    number:true,
                },
                act_min_range: {
                    requiredIfOtherPresent: { otherField: "#act_max_range" },
                    number:true,
                },
                act_max_range: {
                    requiredIfOtherPresent: { otherField: "#act_min_range" },
                    number:true,
                },
                high_school_gpa: {
                    // required: true,
                    number:true,
                },
                median_salary: {
                    // required: true,
                    number:true,
                },
                avarage_debt: {
                    // required: true,
                    number:true,
                },
                graduation_rate: {
                    // required: true,
                    number:true,
                },
                sp_per_week: {
                    required: true,
                },
                acceptance_rate: {
                    // required: true,
                    number:true,
                },
                country_id: {
                    required: true,
                },
                "weightage[]":{
                    required: true,
                },
                "popular_major_name[]":{
                    required: true,
                },
                "required_percentage[]":{
                    required: true,
                },
                "collegeImage[]": {
                    required: true,
                }
                // ivy_league_badge:{
                //     required: true,
                // }
            },
            messages: {

                college_name: {
                    required: 'Please enter college name',
                },
                // collegeImage: {
                //     required: 'Please select college image',
                // },
                tuition_fee: {
                    required: 'Please enter tuition fee',
                    number:'Please enter only number',
                },
                application_deadline: {
                    required: 'Please enter application deadline',
                },
                scholarship_points: {
                    required: 'Please enter scholarship points',
                    number:'Please enter only number',
                },
                sat_min_range: {
                    required: 'Please enter sat min range',
                    number:'Please enter only number',
                },
                sat_max_range: {
                    required: 'Please enter sat max range',
                    number:'Please enter only number',
                },
                act_min_range: {
                    required: 'Please enter act min range',
                    number:'Please enter only number',
                },
                act_max_range: {
                    required: 'Please enter act max range',
                    number:'Please enter only number',
                },
                high_school_gpa: {
                    required: 'Please enter high school gpa',
                    number:'Please enter only number',
                },
                median_salary: {
                    required: 'Please enter median salary',
                    number:'Please enter only number',
                },
                avarage_debt: {
                    required: 'Please enter avarage debt',
                    number:'Please enter only number',
                },
                graduation_rate: {
                    required: 'Please enter graduation rate',
                    number:'Please enter only number',
                },
                sp_per_week: {
                    required: 'Please enter sp per week',
                },
                acceptance_rate: {
                    required: 'Please enter acceptance rate',
                    number:'Please enter only number',
                },
                country_id: {
                    required: 'Please select country name',
                },
                "weightage[]": {
                    required: 'Please enter weightage',
                },
                "popular_major_name[]": {
                    required: 'Please enter popular major name',
                },
                "required_percentage[]": {
                    required: 'Please enter required percentage',
                },
                "collegeImage[]": {
                    required: "Please select at least one image.",
                }
                // ivy_league_badge: {
                //     required: 'Please select ivy league badge',
                // },
            },
            errorElement: "p",
            errorPlacement: function(error, element) {
                element.after(error);
            },
            /* submitHandler: function (form) {
                 return false;
             },*/
            highlight: function(element) {
                console.log(element);
                $(element).closest('.form-group').addClass('has-error');
            },
            unhighlight: function(element) {
                $(element).closest('.form-group').removeClass('has-error');
            },
        });

    </script>

    {{-- image type validation --}}
    <script type="text/javascript">
        $.fn.checkFileType = function(options) {
            var defaults = {
                allowedExtensions: [],
                preview: "",
                success: function() {},
                error: function() {}
            };
            options = $.extend(defaults, options);
            $previews = $(options.preview);
            return this.each(function(i) {

                $(this).on('change', function() {
                    var value = $(this).val(),
                        file = value.toLowerCase(),
                        extension = file.substring(file.lastIndexOf('.') + 1),
                        $preview = $previews.eq(i);

                    if ($.inArray(extension, options.allowedExtensions) == -1) {
                        options.error();
                        $(this).focus();
                    } else {
                        if (this.files && this.files[0] && $preview) {
                            var reader = new FileReader();
                            reader.onload = function(e) {
                                $preview.show().attr('src', e.target.result);
                                options.success();
                            };

                            reader.readAsDataURL(this.files[0]);
                        } else {
                            options.error();
                        }

                    }

                });

            });
        };

        $('.fileUpload').checkFileType({
            allowedExtensions: ['jpg', 'jpeg', 'png', "gif"],
            preview: ".preview",
            success: function() {
                //alert('success')
            },
            error: function() {
                alert('Please only select png, jpg,jpeg type file for image.');
            }
        });
    </script>

@stop
@endsection